<template>
  <div class="app-container">
    <el-form :inline="true" :model="pageInfo" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="pageInfo.username" placeholder="用户名" />
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="pageInfo.mobile" placeholder="电话号码" />
      </el-form-item>
      <el-form-item label="所属部门">
        <el-input v-model="pageInfo.deptName" placeholder="所属部门" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="toAdd">新增</el-button>
        <el-button type="primary" @click="toUpd">修改</el-button>
        <el-button type="primary" @click="del">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="userId"
        label="用户ID"
        width="180"
      />
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
      />
      <el-table-column
        prop="deptName"
        label="所属部门"
        width="180"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        width="180"
      />
      <el-table-column
        prop="mobile"
        label="手机号"
        width="180"
      />
      <el-table-column
        label="禁用状态"
        width="180"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.status===0?'禁用':'正常' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
      />
    </el-table>
    <el-pagination
      :current-page="pageInfo.pageNum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog title="保存角色" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="传真" :label-width="formLabelWidth">
          <el-input v-model="form.fax" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
        <el-form-item label="座机号" :label-width="formLabelWidth">
          <el-input v-model="form.landlineNumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-checkbox-group v-model="form.rids">
            <el-checkbox v-for="r in rlists" :key="r.roleId" :label="r.roleId">{{ r.roleName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="城市地区" :label-width="formLabelWidth">
          <el-select v-model="form.province" placeholder="省" @change="getCitys">
            <el-option
              v-for="item in provinces"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>

          <el-select v-model="form.city" placeholder="市" @change="getCountrys">
            <el-option
              v-for="item in citys"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>

          <el-select v-model="form.country" placeholder="区">
            <el-option
              v-for="item in countrys"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      data: [],
      total: null,
      ids: [],
      detail: 'add',
      provinces: [],
      citys: [],
      countrys: [],
      rlists: [],
      pageInfo: {
        pageNum: null,
        pageSize: null,
        username: null,
        mobile: null,
        deptName: null
      },
      dialogFormVisible: false,
      form: {
        deptId: null,
        username: null,
        password: null,
        email: null,
        address: null,
        fax: null,
        mobile: null,
        landlineNumber: null,
        remark: null,
        userId: null,
        parentId: null,
        province: null,
        city: null,
        country: null,
        status: null,
        createTime: null,
        rids: []
      },
      formLabelWidth: '120px',
      defaultProps: {
        children: 'depts',
        label: 'name'
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-user/list', { params: this.pageInfo }).then((response) => {
        console.log(response.data)
        this.tableData = response.data.obj.list
        this.pageInfo.pageNum = response.data.obj.pageNum
        this.pageInfo.pageSize = response.data.obj.pageSize
        this.total = response.data.obj.total
      })
      this.axios.post('http://127.0.0.1/api/sys/wish/sys-dept/getDeptss').then((response) => {
        this.data = response.data.obj
      })
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-region/getArea?pid=' + 1).then((response) => {
        this.provinces = response.data.obj
      })
    },
    toUpd() {
      if (this.ids.length > 1) {
        alert('请选择一条记录!!!')
      } else {
        this.axios.get('http://127.0.0.1/api/sys/wish/sys-user/getOne?id=' + this.ids[0]).then((response) => {
          this.dialogFormVisible = true
          this.detail = 'upd'
          this.form.userId = response.data.obj.userId
          this.form.username = response.data.obj.username
          this.form.password = response.data.obj.password
          this.form.email = response.data.obj.email
          this.form.address = response.data.obj.address
          this.form.fax = response.data.obj.fax
          this.form.mobile = response.data.obj.mobile
          this.form.landlineNumber = response.data.obj.landlineNumber
          this.form.remark = response.data.obj.remark
          this.form.deptId = response.data.obj.deptId
          this.form.parentId = response.data.obj.parentId
          this.form.province = response.data.obj.province
          this.axios.get('http://127.0.0.1/api/sys/wish/sys-region/getArea?pid=' + this.form.province).then((response) => {
            this.citys = response.data.obj
          })
          this.form.city = response.data.obj.city
          this.axios.get('http://127.0.0.1/api/sys/wish/sys-region/getArea?pid=' + this.form.city).then((response) => {
            this.countrys = response.data.obj
          })
          this.form.country = response.data.obj.country
          this.form.status = response.data.obj.status
          this.form.createTime = response.data.obj.createTime
        })
      }
    },
    save() {
      let url = null
      if (this.detail === 'add') {
        url = 'http://127.0.0.1/api/sys/wish/sys-user/add'
      }

      if (this.detail === 'upd') {
        url = 'http://127.0.0.1/api/sys/wish/sys-user/upd'
      }

      this.axios.post(url, this.form).then((response) => {
        if (response.data.obj) {
          this.init()
          this.dialogFormVisible = false
        } else {
          alert('保存失败!!!')
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageInfo.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageInfo.pageNum = val
      this.init()
    },
    onSubmit() {
      this.init()
    },
    toAdd() {
      this.dialogFormVisible = true
      this.detail = 'add'
      this.form.userId = null
      this.form.username = null
      this.form.password = null
      this.form.email = null
      this.form.address = null
      this.form.fax = null
      this.form.mobile = null
      this.form.landlineNumber = null
      this.form.remark = null
      this.form.deptId = null
      this.form.parentId = null
      this.form.province = null
      this.form.city = null
      this.form.country = null
      this.form.status = null
      this.form.rids = []
    },
    del() {
      var idss = this.ids.join(',')
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-user/delAll?ids=' + idss).then((response) => {
        console.log(response.data)
        if (response.data.obj) {
          this.init()
        }
      })
    },
    handleSelectionChange(val) {
      var array = []
      for (const u of val) {
        array.push(u.userId)
      }
      this.ids = array
    },
    handleNodeClick(data) {
      console.log(data)
      this.form.deptId = data.deptId
      this.form.parentId = data.parentId
      this.rlists = []
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-role/getrlist?did=' + data.deptId).then((response) => {
        console.log(JSON.stringify(response.data))
        this.rlists = response.data
      })
    },
    getCitys() {
      this.citys = []
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-region/getArea?pid=' + this.form.province).then((response) => {
        this.citys = response.data.obj
      })
    },
    getCountrys() {
      this.countrys = []
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-region/getArea?pid=' + this.form.city).then((response) => {
        this.countrys = response.data.obj
      })
    }
  }
}
</script>

